<template>
  <div class="DB-calendar-container">
    <el-card class="app-container">
      <el-calendar v-model="datevalue">
        <template slot="dateCell" slot-scope="{ date, data }">
          <div class="date-content">
            <span class="text">{{ data.day.split('-').slice(1).slice(1).join('') }}</span>
            <span v-if="isWeek(date)" class="rest">休</span>
          </div>
        </template></el-calendar
      >
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DB-calendar',
  data() {
    return {
      datevalue: new Date(),
    }
  },
  methods: {
    isWeek(date) {
      // 根据星期 判断休息日期
      return date.getDay() === 6 || date.getDay() === 0
    },
  },
}
</script>

<style lang="less" scoped>
.app-container {
  border-radius: 10px;
  .rest {
    font-size: 14px;
    color: var(--themeColor);
  }
}

.date-content {
  display: flex;
  flex-direction: column;
}
</style>
